<template>
	<view class="home-container">
		<view class="self-billing">
			<view class="tabs-box">
				<tabs @change="changeTabbar"></tabs>
			</view>

			<view class="card-main" v-for="(item, i) in preList" :key='i' @click="toPagePath(item)">
				<view class="top-box">

					<view class="">
						<image src="../../static/images/floder.png" class="pre-img"></image>
						处方笺号：{{item.preNo}}
					</view>
					<view class="right-img">
						<image v-if="item.state==='1'" src="../../static/images/dsf.png" class="state-img"></image>
						<image v-if="item.state==='问诊中'" src="../../static/images/dz.png" class="state-img"></image>
						<image v-if="item.state==='已结束'" src="../../static/images/dz.png" class="state-img"></image>
						<image v-if="item.state==='已取消'" src="../../static/images/dz.png" class="state-img"></image>
					</view>
				</view>



				<view class="card">
					<view class="patient-row">
						<text class="label">就诊人 ：</text>
						<text class="value">{{ item.patName }}</text>
					</view>
					<view class="patient-row">
						<text class="label">诊断结果 ：</text>
						<text class="value">{{ item.diag }}</text>
					</view>
					<view class="patient-row">
						<text class="label">开方时间 ：</text>
						<text class="value">{{ item.startTime }}</text>
					</view>
					<view class="order-card">
						<view class="order" v-for="(order, j) in item.orderList" :key='j'>
							<view class="order-name">
								<view class="value">
									{{order.name}}
								</view>
								<view class="order-amount">
									x {{order.amount}}
								</view>
							</view>

							<view class="order-usage">
								<view class="order-spec">
									规格：{{order.spec}}
								</view>
								<view class="">
									用法：{{order.freq}} | {{order.route}} | {{order.dose}}{{order.doseUnit}}
								</view>
							</view>

						</view>

					</view>
				</view>


			</view>





		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import tabs from '../../components/CustomTabs.vue';
	export default {
		components: {
			tabs
		},
		data() {
			return {
				list: [{
					label: '全部',
					type: 'all'
				}, {
					label: '待编辑',
					type: 'edit'
				}, {
					label: '已发布',
					type: "push"
				}],
				preList: [{
					preNo: '7883239666',
					patName: "托尔斯泰",
					diag: '上呼吸道感染',
					startTime: '2025-09-07 15:35:17',
					state: '1',
					orderList: [{
						"name": '阿莫西林分散片',
						spec: '1ml:10盒',
						freq: 'TId',
						dose: '10',
						doseUnit: '片',
						route: '口服',
						"amount": '1'
					}]
				}, {
					preNo: '7883239666',
					patName: "托尔斯泰",
					diag: '上呼吸道感染',
					startTime: '2025-09-07 15:35:17',
					state: '1',
					orderList: [{
						"name": '阿莫西林分散片',
						spec: '1ml:10盒',
						freq: 'TId',
						dose: '10',
						doseUnit: '片',
						route: '口服',
						"amount": '1'
					}]
				}]
			}
		},
		computed: {
			...mapGetters([
				'userInfo'
			]),
		},
		methods: {
			toPagePath(path) {
				uni.navigateTo({
					url: "/pages/prescription/PrescriptionDetail"
				})
			},

		}
	}
</script>

<style scoped>
	.home-container {
		min-height: 100vh;
		padding: 32rpx;
	}

	.tabs-box {
		padding-bottom: 32rpx;
	}

	.card-main {
		background: linear-gradient(180deg, #EAF1FF 0%, #F6F8FC 20%, #FFFFFF 100%);
		box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.102);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin-bottom: 32rpx;
		padding: 24rpx;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-style: normal;
		text-transform: none;
		text-align: left;
	}

	.pre-img {
		width: 32rpx;
		height: 28rpx;
		margin-top: 5px;
		margin-right: 10rpx;
	}

	.top-box {
		display: flex;
		justify-content: space-between;
		margin-bottom: 38rpx;
	}

	.patient-row {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.order-card {
		background-color: #ECF1F9;
		padding: 24rpx;
		border-radius: 10rpx;

	}

	.order-name {
		display: flex;
		justify-content: space-between;
	}

	.order-amount {
		height: 26rpx;
		font-size: 24rpx;
		color: #333333;
		line-height: 26rpx;

	}

	.label {
		height: 28rpx;
		font-size: 28rpx;
		color: #666666;
		width: 6em;
		line-height: 28rpx;

	}

	.value {
		height: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 28rpx;
		flex: 1;
		font-size: 28rpx;
	}

	.order-usage {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}

	.order-spec {
		margin-top: 16rpx;
		margin-bottom: 16rpx;
	}

	.right-img {
		position: relative;
		right: -28rpx;
		top: -28rpx;
	}

	.state-img {
		width: 124rpx;
		height: 42rpx;
	}
</style>